<template>
    <div class="main">
        <div class="s1">
            <containerBox :title="`${name}报警事件`">
                <div class="top">
                    <div class="statistics">
                        <div class="nums">
                            <div class="total">
                                <div class="icon"></div>
                                <div class="right">
                                    <div class="title">事件源数量</div>
                                    <div class="num">{{totalNum}}</div>
                                </div>
                            </div>
                            <div class="error">
                                <div class="icon"></div>
                                <div class='right'>
                                    <div class="title">违规事件数</div>
                                    <div class="num">{{dangerNum}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="select-container">
                        <selector v-show="!(id == 100 || list.length==0) " :list="list" :department="department" />
                    </div>
                </div>
                <div class="back" @click="handleBack()" v-if="id!=100 && isNmg && id!=130"></div>
                <mapView v-if="isNmg" class="map-view" />
                 <ganMapView v-if="!isNmg" class="map-view" />
            </containerBox>
        </div>

        <div class="s2">
            <containerBox :title="'本周报警数据'">
                <policeData :mapWeek="mapWeek" />
            </containerBox>
        </div>
    </div>
</template>

<script>
import containerBox from '../container-box/index.vue'
import mapView from './map/index.vue'
import ganMapView from './map/ganMap.vue'
import policeData from './policeData/index.vue'
import selector from './select/index.vue'
export default {
    components: { containerBox, mapView, policeData, selector, ganMapView },
    data() {
        return {
            totalNum: 0,
            dangerNum: 0,
            id: 0,
            list: [],
            department: {},
            week: [],
            isNmg: true,
        }
    },
    props: ['mapWeek', 'data_count', "event_count", 'name'],
    beforeMount() {
        this.totalNum = this.event_count;
        this.dangerNum = this.data_count;
        this.id = this.$route.query.deptId || 100;
        this.isNmg = this.id != 131
        this.fetchData()
    },
    methods: {
        fetchData() {
            this.$api.screen.getDeptById(this.id).then(res=>{
               const {code, data} = res;
               if(code==0) {
                this.list = data.children;
                this.department = data.department;
               }
            })
        },
       
        handleBack() {
            this.$router.push({
                url: "/index",
                query: {
                    deptId: 100,
                }
            })
            this.$router.go(0)
        }
       
    }
}
</script>

<style lang="scss" scoped>
.main {
    width: 95%;
    height: 95%;
    margin: 10px auto;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .s1 {
        height: calc(100% - 438px);
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;

        .top {
            z-index: 999999999;
            height: 100px;
            width: 100%;
            position: absolute;
            top: 50px;
            display: flex;
            align-items: center;
            justify-self: space-between;

            .statistics {
                margin-left: 10px;
                height: 100px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .nums {
                    display: flex;
                    min-width: 400px;
                    justify-content: space-between;

                    .total, .error {
                        display: flex;
                        align-items:center;

                        .icon {
                            margin-right: 10px;
                        }

                        .right {
                            height: 100%;
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                            justify-content: space-around;

                            .title {
                                font-size: 18px;
                            }
                            .num {
                                font-weight: bold;
                                font-size:26px;
                            }
                        }

                    }
                    .total {
                        .icon {
                            height: 72px;
                            width: 72px;
                            background: url('../../../../assets/img/otto/icon-num-total.png') no-repeat 0px 0px;
                            background-size: 100% 100%;
                        }
                    }

                    .error {
                        .icon {
                            height: 72px;
                            width: 72px;
                            background: url('../../../../assets/img/otto/icon-num-error.png') no-repeat 0px  0px;
                            background-size: 100% 100%;
                        }
                    }
                }
            }

            .select-container {
                height: 60%;
                min-width: 200px;
                display: flex;
                align-items: center;
                margin-right: 40px;
            }

            .back {

            }
        }

        .back {
            z-index: 999999999;
            height: 50px;
            width: 172px;
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            align-items: center;
            justify-self: space-between;
            background: url('../../../../assets/img/otto/_back.png') no-repeat 0px 0px;
            background-size: 100% 100%;
            cursor: pointer;
        }
        


        .map-view {
            flex: 1;
        }
    }

    .s2 {
        height: 410px;
        margin-top: 30px;
        width: 100%;
    }

}
</style>